<template>
	<div class="loginMain">
		<div class="login">
			<!-- <img class="symbol" src="../../assets/symbol.png" alt=""> -->
			<div class="txt">
				<h1>欢迎来到忘忧</h1>
				<h3>用户注册</h3>
			</div>

			<div class="form">
				<van-field name="uploader" class="tx">
					<template #input>
						<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
					</template>
				</van-field>
				<div class="photo">
					<img src="../../assets/Icons-photo.png" alt="">
				</div>
				<div class="item">
					<span class="iconfont icon-wode"></span>
					<input type="text" placeholder="用户" v-model="name"
						:rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
				</div>
				<div class="item">
					<span class="iconfont icon-shouji"></span>
					<input type="text" placeholder="手机号码" v-model="phone"
						:rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
				</div>
				<div class="item">
					<span class="iconfont icon-duorentaolun"></span>
					<input type="text" placeholder="邮箱" v-model="email"
						 />
				</div>
				<div class="item">
					<span class="iconfont icon-tianchongxing-"></span>
					<input type="password" placeholder="密码" v-model="password"
						:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				</div>

				<div class="item">
					<span class="iconfont icon-tianchongxing-"></span>
					<input type="password" placeholder="确认密码" v-model="password2"
						:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				</div>
				<div class="frame">
					<div class="submit" @click="onSubmit()">提交</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		registerAPI,
		uploadAvatarAPI
	} from "../../api/create";
	import {
		Toast
	} from "vant";
	export default {
		data() {
			return {
				name: "",
				phone: "",
				email: "",
				userimage:"",
				password: "",
				password2: "",
				avatar: "",
				avatarList: [],
				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
				// regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
			};
		},
		methods: {
			//手动处理文件上传
			afterRead(file, detail) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file, detail).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.avatarList = [];
					this.avatarList.push({
						url: result.data
					})
					//设置用户表中的字段值 
					this.userimage = result.data
				});
			},
			// 处理提交保存
			onSubmit() {
				console.log("aaaaaaaa");
				console.log(this.name);
				console.log(this.password);
				console.log(this.phone);
				console.log(this.email);
				if (this.password != this.password2) {
					this.$toast("密码两次输入不一致");
					return;
				}
				//注意传递过去的参数user的属性名

				registerAPI({
					UName:this.name,
					Pwd:this.password,
					NickName:this.name,
					Phone:this.phone,
					Email:this.email,
					UserImage:this.userimage
				}).then(result => {
					// this.$router.push({
					// 	name: "login"
					// });
				});

			},
			// 调整好后删除
			// submit() {
			// 	this.$router.push("/login");
			// },
		},
		created() {
			this.$emit("getnavs-btn", false);
		},
	};
</script>

<style lang="less">
	.loginMain {
		width: 100%;
		height: 100%;
	}

	.login {
		background-color: #0F172A;
		width: 100%;
		height: 100%;
		color: #fff;
		position: absolute;

		.symbol {
			// left: 30%;
			// padding-left: 60px;
			margin: 0 auto;
			top: 10%;
			position: relative;
		}
	}

	.txt {
		// margin: 80px 0 30px 70px;
		left: 10%;
		margin-bottom: 100px;
		margin-top: 80px;
		position: relative;

		h1 {
			font-size: 26px;
			text-align: left;
			height: 48px;
			// padding: 100px 0px 0px 46px;
			// width: 76%;
			// margin: auto;
		}

		h3 {
			font-size: 20px;
			color: #94A3B8;
			text-align: left;
			padding-top: 2px;
			// left: 12%;
			// margin: auto;
			// padding: 20px 0px 10px 46px;
		}

	}


	.form {
		position: relative;
		background-color: #363942;
		padding-bottom: 30px;
		padding-top: 70px;
		border-radius: 12px;
		width: 86%;
		// text-align: center;
		margin: 0 auto;

		.photo {
			background-color: #007AFF;
			width: 40px;
			height: 40px;
			border-radius: 30px;
			position: absolute;
			top: 2%;
			left: 58%;

			img {
				margin: 0 auto;
				padding-top: 12px;
			}
		}

		.van-cell::after {
			border-bottom: none !important;
		}

		.tx {
			top: -16%;
			// border-radius: 30px;
			position: absolute;
			background-color: transparent;
			text-align: center;
			// margin: 0 auto;
			// padding: 0 auto;
			border-bottom-style: none !important;
			left: 32%;

			.van-uploader__wrapper {
				// border: solid #D1D3DE;
				box-shadow: 0px 0px 14px #D1D3DE;
				border-radius: 60px;

				.van-uploader__upload {
					// background-color: #ADB0C0;
					border-radius: 60px;
					width: 100px;
					height: 100px;
					margin: 0 auto;

				}
			}


		}

		.item {
			width: 76%;
			height: 30px;
			line-height: 30px;
			margin: 0 auto;
			border-style: solid;
			border-color: #94A3B8;
			border-width: 1px;
			border-radius: 30px;
			margin-bottom: 20px;

			input {
				background-color: transparent;
				border: 0px;
				outline: none;
				text-indent: 0.5em;
				font-size: 14px;
				color: #fff;
			}

			span {
				font-size: 20px;
				margin-left: 10px;
				display: inline-block;
				vertical-align: middle;
			}

			.getCode {
				border: 1px solid transparent;
				background-color: #243DE2;
				height: 20px;
				line-height: 20px;
				width: 50px;
				border-radius: 20px;
				font-size: 12px;
				color: #FFFFFF;
				float: right;
				margin: 5px;
			}


		}

		.frame {
			width: 76%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #243DE2;
			border: 1px solid transparent;
			border-radius: 12px;
			margin-bottom: 12px;

			.submit {
				font-size: 15px;
				background-color: #243DE2;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}

		.tocreate {
			width: 76%;
			height: 40px;
			line-height: 30px;
			margin: 0 auto;
			background-color: #1E293B;
			border: 1px solid transparent;
			border-radius: 12px;
			margin-bottom: 12px;

			.create {
				font-size: 15px;
				background-color: #1E293B;
				text-align: center;
				color: #FFFFFF;
				margin-top: 8px;
				border-radius: 15px;
			}
		}
	}
</style>
